<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习</title>
    <link rel="stylesheet" href="css/text.css" type="text/css">

</head>

<body>
    <div id="app">
 
        <ul>
     
            <li v-for="(f,index) of friutSort">{{index+1}}-{{f.name}}-{{f.price}}</li>
        </ul>

        <ul>
            <template>
                <li>商品名称：{{product.ProName}}</li>
                <li>商品价格：{{product.ProPrice}}</li>
            </template>
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                hasColor: true,
                hasNum: false,
                colorCls: 'forecolor',
                status: 1,
                type: 'name',
                friuts: [
                    { name: 's110', price: 5 },
                    { name: 's111', price: 2 },
                    { name: 's112', price: 9 },
                    { name: 's113', price: 12 }
                ],
                user: {s
                    userName: 'sa',ss
                    password: '1234',
s
                },
                product:[
                    {
                        ProName:'苹果',
                        ProPrice:20
                    },
                    {
                        ProName:'香蕉',
                        ProPrice:13
                    },
                    {
                        ProName:'面包',
                        ProPrice:8
                    },
                    {
                        ProName:'柚子',
                        ProPrice:6
                    },
                ]
            },
            methods: {
                handleToggleClick: function () {
                    this.type = this.type === 'name' ? 'password' : 'name';
                }
            },
            // 计算属性具有缓存性
            computed: {
                bgcolorCls: function () {
                    return this.hasColor ? 'bgcolor' : ','
                },
                clsProp: function () {
                    return {
                        bgcolor: this.hasColor,
                        forecolor: this.hasNum
                    }
                },
                // 冒泡排序
                friutSort: function () {
                    return this.friuts.sort(function (a, b) {
                        return a.price - b.price;
                    })
                },
                // 过滤 A-商品名称中含A的
          

            }

        })

    </script>
</body>

</html>